前言:
- Vue.js 笔记;
Vue.js 简介
1. Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。 |
Vue.js 使用文档及下载
引入 Vue: |
Vue 实例
虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。 |
模板语法
window.onload = function(){ |
绑定 HTML Class
var vm = new Vue({ |
条件渲染
通过条件指令可以控制元素的创建(显示)或者销毁(隐藏),常用的条件指令如下:
v-if
v-if 可以控制元素的创建或者销毁
v-if=”判断的条件”
使用条件渲染注意:判断体的中间,不能有其他元素出现
<h1 v-if="ok">Yes</h1> |
v-else
v-else 指令来表示 v-if 的“else 块”,v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
<div v-if="Math.random() > 0.5"> |
v-else-if
v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用: |
v-show
另一个用于根据条件展示元素的选项是 v-show 指令。
用法和 v-if 大致一样,但是它不支持 v-else,
它和 v-if 的区别是,它制作元素样式的显示和隐藏,元素一直是存在的:
<h1 v-show="ok">Hello!</h1> |
列表渲染
通过 v-for 指令可以将一组数据渲染到页面中,数据可以是数组或者对象, |
事件处理
事件绑定方法
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,事件的处理,简单的逻辑可以写在指令中,复杂的需要在 vue 对象的 methods 属性中指定处理函数。
<div id="example-1"> |
methods 属性中指定处理函数:
<div id="example-2"> |
事件修饰符
实际开发中,事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为,在 vue.js 可以加上事件修饰符
<!-- 阻止单击事件继续传播 --> |
表单输入绑定
可以用 v-model 指令在表单 <input>
及 <textarea>
元素上创建 双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
单行文本框
<input v-model="message" placeholder="edit me"> |
多行文本框
<span>Multiline message is:</span> |
复选框
单个复选框,绑定到布尔值:
<input type="checkbox" id="checkbox" v-model="checked"> |
多个复选框,绑定到同一个数组:
<div id='example-3'> |
单选框
<div id="example-4"> |
下拉框
<div id="example-5"> |
计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example"> |
这个表达式的功能是将message字符串进行反转,这种带有复杂逻辑的表达式,我们可以使用计算属性
<div id="example"> |
侦听属性
侦听属性的作用是侦听某属性值的变化,从而做相应的操作,侦听属性是一个对象,它的键是要监听的对象或者变量,值一般是函数,当你侦听的元素发生变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。
window.onload = function(){ |
过滤器
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式
<!-- 在双花括号中 --> |
过滤器实际上是一个函数,可以在一个组件的选项中定义组件内部过滤器:
data:{ |
或者在创建 Vue 实例之前全局定义过滤器:
Vue.filter('Yuan',function(value){ |
此时过滤器’RMB’只能在定义它的对象接管标签内使用,而’Yuan’可以全局使用
实例生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中会自动运行一些叫做生命周期钩子的函数,我们可以使用这些函数,在实例的不同阶段加上我们需要的代码,实现特定的功能。
beforeCreate
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始
beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted
实例挂载到dom之后被调用,可以当成是vue对象的ready方法来使用,一般用它来做dom的初始化操作。
beforeUpdate
数据发生变化前调用
updated
数据发生变化后调用
数据交互
vue.js 没有集成 ajax 功能,要使用 ajax 功能,可以使用 vue 官方推荐的 axios.js 库来做 ajax 的交互。 axios 库的下载地址:https://github.com/axios/axios/releases
axios 完整写法:
axios({ |
axios 请求的写法也写成 get 方式后 post 方式。
执行 get 请求
// 为给定 ID 的 user 创建请求 |
执行 post 请求
axios.post('/user', { |